<template>
  <div class="page">
    <div class="page-title">节能节水环保认证企业</div>

    <div class="page-content">
      <div class="page-content-screen">
        <div class="screen">
          <search-input :width="230" v-model="searchTxt" placeholder="请输入企业名称" @enter="handlerEnter" @clear="handlerEnter" />
          <vc-filter :menus="screen" />
        </div>
        <div class="total">共计<span style="color: #FF5959;">&nbsp;{{ totalSize }}&nbsp;</span>条</div>
      </div>
      <div>
        <vc-table
          :loading="loading"
          :tableData="tableData"
          :columns="columns"
          :total="totalSize"
          :pageSize="PAGE_SIZE"
          v-model:pageNum="queryData.pageNum"
          :defaultSort="{ field: 'noticeDate', order: 'desc' }"
          @page-change="handleCurrentChange"
          @sort-change="sortChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import searchInput from '@/components/page-search/index.vue';
import { useScreen } from './useScreen';
import { useTable } from './useTable';
import { getTechnologyPromotion } from '../../apis';

const totalSize = computed(() => {
  return data?.value?.total ?? 0;
});

const { PAGE_SIZE, queryData, screen } = useScreen();

watch(
  () => queryData,
  (val) => {
    if (!isPageChange.value) {
      queryData.pageNum = 1;
    } else {
      isPageChange.value = false;
    }
    queryData.searchTxt = searchTxt.value;

    run(val);
  },
  { deep: true }
);

// 双向绑定另一个值，触发enter后再查询
const searchTxt = ref('');
const handlerEnter = () => {
  queryData.searchTxt = searchTxt.value;
};

const tableData = ref([]);

const { data, loading, run } = useRequest(getTechnologyPromotion, {
  defaultParams: [queryData],
  onSuccess: (data) => {
    tableData.value = data.values;
  }
});

const isPageChange = ref(false);
const handleCurrentChange = (val: number) => {
  queryData.pageNum = val;
  isPageChange.value = true;
};

const sortChange = (event) => {
  const { column, order } = event;
  const { field } = column;
  queryData.sortRule = field + ':' + order;
};

const { columns } = useTable();
</script>

<style lang="scss" scoped>
@import '../../../sewagePermit/index.scss';
</style>
